<template>
	<view class="course-form">
		<view class="form-box">
			<u-form :label-style='style' label-position='top' :error-type="errorType" :model="form" ref="uForm">
				<u-form-item label="会员类型" prop="typeName">
					<u-input :disabled='true' placeholder='请选择会员类型' @click="showVipType = true" v-model="form.typeName" type="select" />
				</u-form-item>
				<u-select value-name='vipTypeId' label-name='typeName' @confirm='confirmType' title='选择性别' v-model="showVipType"
				 :list="vipTypeList"></u-select>
				<u-form-item label="从事领域" prop="speciality">
					<u-input v-model="form.speciality" placeholder='请输入从事领域' />
				</u-form-item>
				<u-form-item label="单位名称" prop="companyName">
					<u-input v-model="form.companyName" placeholder='请输入单位名称' />
				</u-form-item>
				<u-form-item label="主管单位" prop="sex">
					<u-input v-model="form.sex" placeholder='请输入主管单位' />
				</u-form-item>
				<u-form-item label="通讯地址" prop="companyAddress">
					<u-input v-model="form.companyAddress" placeholder='请输入通讯地址' />
				</u-form-item>
				<u-form-item label="邮编" prop="postcode">
					<u-input v-model="form.postcode" placeholder='请输入邮编' />
				</u-form-item>
				<u-form-item label="成立时间" prop="birthday">
					<u-input :disabled='true' placeholder='请选择成立时间' @click="birthdayShow = true" v-model="form.birthday" type="select" />
				</u-form-item>
				<u-calendar active-bg-color='#0050A5' btn-type='jz' v-model="birthdayShow" @change="changeBirthday"></u-calendar>
				<u-form-item label="职工人数" prop="workYear">
					<u-input type='number' v-model="form.workYear" placeholder='请输入职工人数' />
				</u-form-item>
				<u-form-item label="经济性质" prop="politicalStatus">
					<u-input v-model="form.politicalStatus" placeholder='请输入经济性质' />
				</u-form-item>
				<u-form-item label="注册资金" prop="educationalLevel">
					<u-input type='number' v-model="form.educationalLevel" placeholder='请输入注册资金' />
				</u-form-item>
				<u-form-item label="单位网址" prop="jobTitle">
					<u-input v-model="form.jobTitle" placeholder='请输入单位网址' />
				</u-form-item>
				<u-form-item label="单位邮箱" prop="emailQq">
					<u-input v-model="form.emailQq" placeholder='请输入单位邮箱' />
				</u-form-item>
				<u-form-item label="法人代表" prop="position">
					<u-input v-model="form.position" placeholder='请输入法人代表' />
				</u-form-item>
				<u-form-item label="单位职务" prop="contactPhone">
					<u-input v-model="form.contactPhone" placeholder='请输入单位职务' />
				</u-form-item>
				<u-form-item label="座机" prop="address">
					<u-input type='number' v-model="form.address" placeholder='请输入座机' />
				</u-form-item>
				<u-form-item label="手机" prop="principalPhone">
					<u-input type='number' v-model="form.principalPhone" placeholder='请输入手机' />
				</u-form-item>
				<u-form-item label="传真" prop="faxes">
					<u-input v-model="form.faxes" placeholder='请输入传真' />
				</u-form-item>
				<u-form-item label="QQ号" prop="weChat">
					<u-input type='number' v-model="form.weChat" placeholder='请输入QQ号' />
				</u-form-item>
				<u-form-item label="手机" prop="productionCategory">
					<u-input v-model="form.productionCategory" placeholder='请输入手机' />
				</u-form-item>
				<u-form-item label="主营业务" prop="jobResume">
					<u-input v-model="form.jobResume" placeholder='请输入主营业务' />
				</u-form-item>
				<u-form-item label="公司简介" prop="workPerformance">
					<u-input v-model="form.workPerformance" placeholder='请输入公司简介' />
				</u-form-item>
			</u-form>
		</view>
		<view class="btn-box">
			<u-button ripple="" type='jz' @click="submit">下一步</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			vipTypeList: {
				type: Array,
				default: () => []
			},
			status: {
				default: null
			},
		},
		data() {
			return {
				birthdayShow: false,
				accountTypeShow: false,
				showVipType: false,
				accountType: [{
						label: '女',
						value: '0'
					},
					{
						label: '男',
						value: '1'
					},
				],
				form: {
					typeName: '',
					speciality: '',
					companyName: '',
					sex: '',
					companyAddress: '',
					postcode: '',
					birthday: '',
					workYear: '',
					politicalStatus: '',
					educationalLevel: '',
					jobTitle: '',
					emailQq: '',
					position: '',
					contactPhone: '',
					address: '',
					principalPhone: '',
					picture: '',
					professionalCategory: '',
					productionName: '',
					productionCategory: '',
					faxes: '',
					weChat: '',
					jobResume: '',
					workPerformance: ''


				},
				errorType: ['border-bottom', 'toast', 'message'],
				style: {
					color: '#303030',
					fontWeight: 'bold'
				},
				rules: {
					typeName: [{
						required: true,
						message: '请选择会员类型',
						trigger: ['change', 'blur'],
					}],
					principalPhone: [{
						validator: (rule, value, callback) => {
							var reg = /^(?:(?:\+|00)86)?1\d{10}$/
							if (!value) {
								callback(new Error('请输入手机号'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('手机号格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					emailQq: [{
						validator: (rule, value, callback) => {
							var reg =
								/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
							if (!value) {
								callback(new Error('请输入单位邮箱'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('邮箱格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					companyName: [{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请输入单位名称'));
							} else if (value.length <= 2) {
								callback(new Error('单位名称不得少于三位字符'));
							} else {
								callback()
							}
						},
						trigger: ['change', 'blur'],
					}],
					companyAddress: [{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请输入通讯地址'));
							} else if (value.length <= 2) {
								callback(new Error('通讯地址不得少于三位字符'));
							} else {
								callback()
							}
						},
						trigger: ['change', 'blur'],
					}],
					birthday: [{
						required: true,
						message: '请选择成立时间',
						trigger: ['change', 'blur'],
					}],
					position: [{
							required: true,
							message: '请输入法人代表',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
							transform(value) {
								return String(value);
							},
							message: '姓名不能输入数字和特殊符号'
						},
					],
					jobTitle: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							var reg = /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/
							if (!value) {
								callback()
							}
							if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('请输入正确的网址格式'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					workYear: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							var reg = /^\d{1,}$/
							if (!value) {
								callback()
							}
							if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('职工人数请输入数字'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					postcode: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							var reg = /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/
							if (!value) {
								callback()
							}
							if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('请输入正确的邮编格式'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					speciality: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							if (value && value.length <= 2) {
								callback(new Error('从事领域不得少于三位字符'));
							} else {
								callback()
							}
						},
						trigger: ['change', 'blur'],
					}]
				}

			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {},
		methods: {
			changeBirthday(val) {
				console.log(val)
				this.form.birthday = val.result
			},
			//选择会员类别
			confirmType(val) {
				let vipTypeId = val[0].value
				let item = this.vipTypeList.find((item) => item.vipTypeId == vipTypeId)

				if (item) {
					this.form.price = item.price
					this.form.typeName = item.typeName
					this.form.vipTypeId = item.vipTypeId
					this.form.declareName = item.typeName
					this.form.signature2 = item.typeName
				}

			},
			confirm(val) {
				console.log(val)
			},
			handAccountType() {

			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						const userType = this.cache.getCache('userMsg').userType
						this.form.declareType = 2
						this.form.status = 0
						this.form.vipType = userType //先写死--0企业会员 1个人会员
						console.log(this.form, '提交的数据')
						delete this.form.awardId
						uni.navigateTo({
							url: '/pages/my/authVip/form/qyVerify?form=' + JSON.stringify(this.form) + '&status=' + this.status
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.course-form {
		.form-box {
			padding: 0 30rpx;
			padding-bottom: 200rpx;

			.account-text {
				color: $bs-color-theme;
				font-size: 24rpx;
				text-align: right;
				margin-top: 10rpx;
			}

			.up-img {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				position: relative;
				overflow: hidden;

				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 3;
				}

				.img {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				&::after {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					content: '';
					background: rgba(0, 0, 0, 0.5);
				}
			}
		}

		.btn-box {
			background: #FFFFFF;
			box-shadow: 0 0 26px 0 rgba(18, 27, 83, 0.07);
			padding: 20rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 3;
		}
	}
</style>
